<template>
  <div class="app-set-page">
    <!-- 上半部分，包括标题、导出、搜索、页码 -->
    <header class="main-header">
      <div>
        <!-- 标题 -->
        <div class="title">
          <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
          <p class="black">{{$I18n.address}}</p>
        </div>
        <button class="btn" @click="$router.push({path: 'addressAdd'})">{{$I18n.addressAdd}}</button>
      </div>

      <div>
        <!-- 搜索 -->
        <Search ref="search" @search="search" :placeholder="$I18n.addressSearch"></Search>
        <div class="icon-pagination">
          <ul class="inputIcon">
            <li><SelectIcon icon="fa fa-calendar-check-o" :text="$I18n.createdDate" type="date" keys="createdDate" date_type="DAY" @select="select"></SelectIcon></li>
            <li><SelectIcon icon="fa fa-address-card" :text="$I18n.addressStatus" type="list" keys="addressStatus" :datalist="statusList"  @select="select"></SelectIcon></li>
            <li><SelectIcon icon="fa fa-address-card" :text="$I18n.site" type="list" keys="site" :datalist="siteList"  @select="select"></SelectIcon></li>
          </ul>
          <!-- 分页 -->
          <Pagination :pageSize="10" @load="loadTableList"></Pagination>
        </div>
      </div>
    </header>
    <!-- 列表 -->
    <Table :tagsInfo="tagsInfo"></Table>
  </div>
</template>

<script>
import Search from '@/components/common/search'
import SelectIcon from '@/components/common/selectIcon'
import Table from './componets/table'
import Pagination from '@/components/common/pagination'

export default {
  data() {
    return {
      tagsInfo: {},                  // 搜索条件
      typeList: [],
      channelList: [],
      statusList: [
        {codeKey: 'NEW', codeName: '新开'},
        {codeKey: 'USEING', codeName: '使用中'},
        {codeKey: 'DISABLE', codeName: '封禁'},
      ],
      siteList: [
        {codeKey: 'US', codeName: '美国'},
        {codeKey: 'JP', codeName: '日本'},
        {codeKey: 'FR', codeName: '法国'},
        {codeKey: 'CA', codeName: '加拿大'},
        {codeKey: 'UK', codeName: '英国'},
        {codeKey: 'IT', codeName: '意大利'},
        {codeKey: 'DE', codeName: '德国'},
        {codeKey: 'AU', codeName: '澳大利亚'},
        {codeKey: 'ES', codeName: '西班牙'},
        {codeKey: 'KR', codeName: '韩国'},
      ],
    }
  },
  components: {
    Search,
    SelectIcon,
    Table,
    Pagination
  },
  methods: {
    // 往tag搜索框添加标签
    select(obj) {
      this.$refs['search'].$emit('append', obj)
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    search(obj) {
      this.tagsInfo = obj
    },
    // 改变页码，重新加载表格数据
    loadTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
    }
  },
  created() {}
};
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
